Helo our Welcome to this leg shot in this leg.
Sure we are going to be team the presentation for our app.
This is the our chawl see SS that will use to start the app.
So this is how the app looks like at the moment.
This is what the page looks like.
So once we've applied the styling issue to see it looking much prettier than this.
Before I explain the stylin let me run through quickly some of the attributes we will use here.
So we have used some attributes like for example here we've got an idea.
So we're going to use this I.D. to see how this dph here is very deep.
And we've also got some ideas here for the span.
So anywhere and then with anywhere we've got I will use the idea to do this tiling where we've got no
idea it will use the outroar tags to do the Stein in for example down the body with cassava hay stack.
So the way this is the way I'm gonna explain this I've already written this.
He says just to save time I will just run through the.
He says with you.
So let me open obviously a six page here.
This is the actual style tags so this is this the SS So I've started with the body here.
So when.
So this is how you do it.
But you write the name of the tag is the body tag.
In between the curly braces is where you specify the type of style you want to use for the body.
So I've said here on line 3 that for the body which is what they call content of the page I want the
font family to be Helvetica Ariel and sansevero.
So this is a first choice.
So if you open this app on your Web browser if your computer has now got help vertica a tool use aerial.
If he hasn't got Ero Ito you have sanscrit.
So that's how it works.
You always need to specify more than one font family in case the computer viewer on the page doesn't
have the first one you have defined.
He can use this substitute.
Next define the margin.
I'm giving it a value of 50 pixels margin because CLI is the space from you know from the corner.
So it would be space from now the left the way the margin is define you.
You define it from top right bottom left the way I tend to remember that is using the word trouble and
taking that Valse So you now believe t for top R for right and then B for bottom and then well for left.
If we take out the vowels were left those four.
That's how I remember it's always wave for you if you specify just one value to apply the 50 pixels
to all four sides.
Top right bottom left.
So if you specify two values you will as well you will apply the first value to the top and the bottom.
So on value to the left B right.
Okay.
So that's how the margin work so I have specified 50 pics so that means it will apply to all four corners.
It a background.
This is hex values with the back ground column about next.
This is the symbol for an idea hash.
So this is the content our Deve here give it with our system 50 pixels.
That's how wide our one is.
When you are specify your success you must always end the line in semicolon.
If not it will not work.
If you notice all the semicolons I've specified at the end of the declaration.
Okay that's very important.
So there's value here with giving this value comma.
So you put a call on to separate that from the value.
Notice it article on here is separate from the value and then giving the height of 350 pixels the background
colour of giving it.
This is our x values and marginal tool when you set the margin and you give you the value of or to what
this will do.
It will send to the div in the P centres in the in the page.
That's what I'm done here.
This is how you.
Pacify a comment in C Ss slash Asterix and anything in between there is ignored by the web browser.
So when this page displays this text there will not be seen.
All right saw last that for the container and then the H1 tag here.
This one is a head in tack so I've given it the font size that I want the text to be forty seven pixels
giving me a font.
Wait that is how bald the text will be six hundred shoreless press 5 pixels for k shibulal case.
All right and then here that's a column.
This column here refers to the column of did text the background colour coded text transformation.
That means tool.
Make it upper case.
Okay.
That's why they transform from its margin.
Again I expend marginalia from the bottom.
I wanted to move 20 pixels margin from the left.
That means from the left I want it to move a hundred and seventy pixels.
Background colour.
Given that padding is a space inside the document.
So I've given it ten pixels which will apply to all four padding and margin works in the same way.
The padding this up like that is top right bottom left.
Okay.
Body radios is what given me five pixels the body does basically makes the corners a bit rounded and
then this blaye in line block displays the text in line as a block element and then we've got two other
ideas here.
This idae weekday so the font window weekdays displayed for example if it displays Today is Saturday.
This is the propertys I want the text to have I want it to have a size of 80 pixels.
The call will have specified.
You could use normal cos you don't have to use scholars.
I could have replace this and just say red and so on so it does work for that as well font weight.
This is hardboard or how bold the Ficke the font will be.
I've given it a unread.
I can put pixels.
Forgot to put a pixels.
Then the phrase here again this is a phrase that will be displayed next to day of the week.
Again I'm giving it this properties here font size Carlo font.
Weight margin are.
And once I'd done that save my document and then brout go to the page again.
So this is a page to refresh it.
You should see the impact.
All right so this is what the page looks like now.
This is why they have looks like.
Note it is not actually displayed the day of the week yet because we have not implemented the javascript.
The Javascript is what will do the magic in determine to determine what date is B's on the computer
clock.
Look at your computer clock and from there determine what day it is.
It'll then display the day of the week here and then also always got displayed quote.
It will replace this and insert it.
Quote We have specified in the javascript array.
So we all do that in the javascript section.
That's it for this local.
Thank you so much for your time.
Take care.
Bye for now.